<template>
  <cu-custom bg-color="bg-white text-black solid-bottom" is-back bg-image="">
    <template #backText>返回</template>
  </cu-custom>
  <view class="container">
    <view class="cu-bar bg-white solid-bottom">
      <view class="action text-black text-bold">
        <text class="cuIcon-titles text-orange"></text>
        <text class="text-xl">专业技能</text>
      </view>
      <view class="action">
        <button
          class="cu-btn bg-gradual-blue shadow"
          form-type="submit"
          @click="save"
        >
          保存
        </button>
      </view>
    </view>
  </view>
  <form>
    <view class="cu-form-group solid-bottom">
      <view class="title">技能名称</view>
      <input v-model="name" placeholder="请输入技能名称" />
      <button class="cu-btn sm shadow bg-orange add" @click="addSkill">
        <text class="cuIcon-add"></text>
      </button>
    </view>

    <view v-if="form.data.length > 0" class="solid-bottom">
      <view
        v-for="(item, index) in form.data"
        :key="index"
        class="cu-form-group"
      >
        <button class="cu-btn sm shadow" @click="delect(index)">
          <text class="cuIcon-delete"></text>
        </button>
        <input
          v-model="item.text"
          placeholder="请输入技能名称"
          class="margin-left-sm"
        />
        <uni-data-select
          v-model="item.type"
          :localdata="range"
        ></uni-data-select>
      </view>
    </view>
  </form>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const name = ref(null);
const state: any = reactive({
  form: {
    data: [],
    type: 4,
  },
});
const { form } = toRefs(state);
let index: any = null;
let skills = [];
onLoad((option: any) => {
  index = option.index;
  uni.getStorage({
    key: "skills",
    success: ({ data }) => {
      if (data?.data) {
        form.value = data;
        skills = data?.data;
      }
    },
  });
  console.log(form);
});
const { range } = reactive({
  range: [
    { value: 0, text: "初学" },
    { value: 1, text: "一般" },
    { value: 2, text: "掌握" },
    { value: 3, text: "熟练" },
    { value: 4, text: "精通" },
  ],
});
const addSkill = () => {
  let text = name.value;
  let o = { text: text, type: "" };
  form.value.data.push(o);
};
const delect = (index: number) => {
  form.value.data.splice(index, 1);
};
const save = () => {
  uni.setStorage({
    key: "skills",
    data: form.value,
  });
  uni.switchTab({ url: "/pages/index/index" });
};
</script>

<style scoped lang="scss"></style>
